<template>
  <div>
    <div id="app" v-title data-title="飞熊科技-解决方案"></div>
    <div class="header">
      <p v-if="!flag" class="loginBtn"><el-button size="medium" type="primary" @click="Inlogin">登录</el-button></p>
      <p v-if="flag" class="loginBtn">
        <span class="spanText">用户：{{ userId }}</span> <el-button size="medium" type="primary" @click="outLogin">退出登录</el-button>
      </p>
      <span style="margin-left: 45px" class="logo"> <img src="../../assets/imges/logo.png" alt="" /></span>
      <ul>
        <li class="index" @click="goHome">首页</li>
        <li class="product" @click="goProduct">产品介绍</li>
        <li class="solution" @click="goSolution">解决方案</li>
      </ul>
    </div>
    <!-- <div class="container">
      <ul class="item1">
        <li v-for="(item, i) in navData" :key="i" :class="{ nav_li: active === i }" @click="goPage(item.id)">
          {{ item.name }}
        </li>
      </ul>
      
    </div> -->
    <keep-alive v-if="isReloadData">
      <router-view />
    </keep-alive>
    <div class="footer">
      <img src="../../assets/imges/底部.png" alt="" />
    </div>
  </div>
</template>
<script>
import base from '../../api/base.js'
export default {
  components: {},
  data() {
    return {
      activeName: '',
      flag: true,
      path: '',
      isReloadData: true,
      userId: '',
      active: 0,
      navTop: [],
      navData: [
        // { name: '环保', path: '/solution/SolutionEnvironmental' },
        // { name: '应急', path: '/solution/SolutionEmergencies' },
        // { name: '交通', path: '/solution/SolutionTraffic' },
        // { name: '水利水电', path: '/solution/SolutionHydroelectric' },
        // { name: '住建', path: '/solution/SolutionMinistry' },
        // { name: '自然资源', path: '/solution/SolutionResource' },
        // { name: '智慧城市', path: '/solution/SolutionCity' },
        // { name: '展馆展厅', path: '/solution/SolutionExhibition' },
        // { name: '教育培训及其他', path: '/solution/SolutionElse' },
      ],
    }
  },
  //暴露父页面的方法
  provide() {
    return {
      reload: this.reload,
    }
  },
  computed: {},
  methods: {
    //刷新事件
    reload() {
      this.isReloadData = false
      this.$nextTick(() => {
        this.isReloadData = true
      })
    },

    goHome() {
      this.$router.push({ name: 'Home' })
    },
    goProduct() {
      this.$router.push({ name: 'product' })
    },
    goSolution() {
      this.$router.push({ name: 'solution' })
    },
    //获取头部导航菜单
    getNavData() {
      this.$axios({
        method: 'get',
        url: `${base.baseUrlLz}/renren-admin/production/pageedit/page`,
        data: {
          page: 1,
          limit: 100,
        },
      })
        .then((res) => {
          if (res.status === 200) {
            console.log(res.data.data, 'daohanglan')
            // navTops.forEach((item) => {})
            this.navData = res.data.data.list
          }
        })
        .catch()
    },
    //跳转应页面
    goPage(id) {
      this.$router.push({
        name: 'solution',
      })
      localStorage.setItem('id', id)
    },
    // 跳转登录
    Inlogin() {
      this.$router.push({ name: 'login' })
    },
    // 退出登录
    outLogin() {
      localStorage.clear()
      this.flag = false
      this.$message({
        message: '已退出登录！',
        type: 'success',
      })
    },
  },
  activated() {
    console.log(localStorage.getItem('token'))
    // console.log(getCookie("password"))

    this.getNavData()
    if (localStorage.getItem('token')) {
      this.userId = localStorage.getItem('username')
      this.flag = true
    } else {
      this.flag = false
    }
  },
}
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
/deep/#tab-home {
  width: 83px !important;
}
.spanText {
  font-size: 16px;
  margin-right: 15px;
}
.solution {
  border-bottom: 2px #31adda solid !important;
}
.logo {
  float: left;
  margin-right: 96px;
  margin-top: 8px;
}
/* ul {
  position: relative;
} */

ul li {
  float: left;
  display: block;
  list-style: none;
  cursor: pointer;
  width: 96px;
  height: 57px;
  opacity: 1;
  font-size: 16px;
  font-family: Noto Sans S Chinese Regular, Noto Sans S Chinese Regular-Regular;
  font-weight: 500;
  margin-left: 35px;
  text-align: center;
  line-height: 57px;
}
.item1 {
  margin-left: 430px;
}
.item1 li {
  width: 115px;
  height: 76px;
  line-height: 76px;
  margin-left: 0px;
  font-size: 14px;
}
.nav_li {
  color: #fff;
  background: #31adda;
}
.footer {
}
.fr {
  float: right;
}
/deep/#tab-product {
  width: 100px !important;
}
/deep/#tab-solution {
  width: 83px !important;
}

.header {
  position: relative;
  /* padding: 0 45px; */
  width: 100.3%;
  height: 59px;
  line-height: 57px;
  border-bottom: 1px solid #c1c1c1;
  margin-top: -7px;
  opacity: 1;
  background: rgba(215, 218, 219, 0.1);
}
.loginBtn {
  position: absolute;
  right: 106px;
}
.footer img {
  width: 100%;
}

/deep/.el-tabs__nav-wrap::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: #fff;
  z-index: 1;
}
</style>
